<template>
  <Header />
  <van-address-edit
    :area-list="areaList"
    :address-info="addressInfo"
    show-delete
    show-set-default
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
    @change-area="onChangeArea"
  />
</template>

<script>
import { toRefs, onMounted, reactive } from "vue";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import Header from "../../../components/Header";
import { useRoute,useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  components: {
    Header,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let data = reactive({
      addressInfo: {},
      areaList:areaList
    })
    const init = () => {
        route.query.isDefault = !!route.query.isDefault;
        route.query.id = Number(route.query.id);
        data.addressInfo = route.query;
    }
    const onSave = (content) => {
      if (route.query.type == "edit") {
        store.commit("countAbout/ADDCHANGEADDRESS", content)
        router.push('./address')
      } else {
        store.commit("countAbout/ADDADDRESS", content)
        router.push('./address')
      }
    };
    const onDelete = () => Toast("delete");  
    const onChangeArea = (val) => {
      //console.log(val)
    };
    


    onMounted(() => {
      init()
    });
    return {
      onChangeArea,
      onSave,
      onDelete,
      areaList,
      ...toRefs(data),
    };
  },
};
</script>

<style>
</style>